<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-cache/no-store" />
<!--[if IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<style>
   .input-text{ 
    width:140px; 
   } 
   .container{
		width:50%;
		height:100%;
		overflow:auto;
		position:fixed;
		float:left; 
		cursor:pointer;
	}
	.queryTable{
		align-left:50%;
		width:45%; 
		float:right;
		cursor:pointer;
	}
   /**当设备宽度小于980时*/
   @media screen and (max-width:980px){
    .queryTable{
		display:none;
	}
	.container{
		width:100%;
	}
   }
</style>
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>物料表</title>
</head>
<body>
	<div class="container">
		<table class="table table-bg table-hover table-border">
			<tr>
				<th>物料表</th>
				<td></td>
			</tr>
			<tr>
				<td>物料代码</td>
				<td>
					<select id="materialCode" class="input-text"></select>
					<span id="addMaterialCodeBtn" class="btn btn-primary radius" data-toggle="modal" data-target="#addMaterialModal">添加物料</span>
				</td>
			</tr>
			
			<tr>
				<td>物料名称</td>
				<td>
					<select id="materialName" class="input-text"></select>
					<span id="addMaterialNameBtn" class="btn btn-secondary-outline radius">+</span>
				</td>
			</tr>
			<tr id="addMaterialNameTr" hidden="hidden">
				<td></td>
				<td>
					<input id="addMaterialName" class="input-text" type="text" placeHolder="物料名称"/>&nbsp;&nbsp;&nbsp;
					<button id="addMaterialNameBtn2" class="btn btn-primary radius">添加</button>
				</td>
			</tr>
			<tr>
				<td>规格型号</td>
				<td>
					<select id="model" class="input-text"></select>
					<span id="addModelBtn" class="btn btn-secondary-outline radius">+</span>
				</td>
			</tr>
			<tr id="addModelTr" hidden="hidden">
				<td></td>
				<td>
					<input id="addModelName" class="input-text" type="text" placeHolder="规格型号"/>&nbsp;&nbsp;&nbsp;
					<button id="addModelNameBtn" class="btn btn-primary radius">添加</button>
				</td>
			</tr>
			<tr>
				<td>单位</td>
				<td>
					<select id="unit" class="input-text"></select>
					<span id="addUnitBtn" class="btn btn-secondary-outline radius">+</span>
				</td>
			</tr>
			<tr id="addUnitBTr" hidden="hidden">
				<td></td>
				<td>
					<input id="addUnitName" class="input-text" type="text" placeHolder="单位"/>&nbsp;&nbsp;&nbsp;
					<button id="addUnitNameBtn" class="btn btn-primary radius">添加</button>
				</td>
			</tr>
			<tr>
				<td>单价</td>
				<td>
					<input id="unitPrice" class="input-text" type="text"/>
				</td>
			</tr>
			<tr>
				<td>状态</td>
				<td>
					<select id="status" class="input-text">
						<option>请选择</option>
						<option>使用</option>
						<option>禁用</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>默认仓库</td>
				<td>
					<select id="defaultWarehouse" class="input-text"></select>
					<span id="addDefaultWarehouseBtn" class="btn btn-secondary-outline radius">+</span>
				</td>
			</tr>
			<tr id="addDefaultWarehouseTr" hidden="hidden">
				<td></td>
				<td>
					<input id="addDefaultWarehouseName" class="input-text" type="text" placeHolder="默认仓库"/>&nbsp;&nbsp;&nbsp;
					<button id="addDefaultWarehouseNameBtn" class="btn btn-primary radius">添加</button>
				</td>
			</tr>
			<tr>
				<td>供应商名称</td>
				<td>
					<select id="providerName" class="input-text"></select>
					<span id="addProviderNameBtn" class="btn btn-secondary-outline radius">+</span>
				</td>
			</tr>
			<tr id="addProviderNameTr" hidden="hidden">
				<td></td>
				<td>
					<input id="addProviderName" class="input-text" type="text" placeHolder="供应商名称"/>&nbsp;&nbsp;&nbsp;
					<button id="addProviderNameBtn2" class="btn btn-primary radius">添加</button>
				</td>
			</tr>
			<tr>
				<td>物料类型</td>
				<td>
					<select id="materialType" class="input-text"></select>
					<span id="addMaterialTypeBtn" class="btn btn-secondary-outline radius">+</span>
				</td>
			</tr>
			<tr id="addMaterialTypeTr" hidden="hidden">
				<td></td>
				<td>
					<input id="addMaterialTypeName" class="input-text" type="text" placeHolder="物料类型"/>&nbsp;&nbsp;&nbsp;
					<button id="addMaterialTypeNameBtn" class="btn btn-primary radius">添加</button>
				</td>
			</tr>
			<tr>
				<td>编号</td>
				<td>
					<select id="color" class="input-text"></select>
					<span id="addColorBtn" class="btn btn-secondary-outline radius">+</span>
				</td>
			</tr>
			<tr id="addColorTr" hidden="hidden">
				<td><input id="addColorName" class="input-text" type="text" placeHolder="编号"/></td>
				<td>
					<input id="addColorDescriptionName" class="input-text" type="text" placeHolder="描述"/>&nbsp;&nbsp;&nbsp;
					<button id="addColorNameBtn" class="btn btn-primary radius">添加</button>
				</td>
			</tr>
			<tr>
				<td>描述</td>
				<td>
					<input id="colorDescription" type="text" class="input-text"/>
				</td>
			</tr>
			<tr>
				<td>采购周期</td>
				<td>
					<input id="procurementCycles" type="text" class="input-text"/>
				</td>
			</tr>
			<tr>
				<td>创建人</td>
				<td>
					<input id="creater" type="text" class="input-text" readonly="readonly"/>
				</td>
			</tr>
			<tr>
				<td>创建时间</td>
				<td>
					<input id="creationTime" type="text" class="input-text" readonly="readonly"/>
				</td>
			</tr>
			<tr>
				<td>上一次修改人</td>
				<td>
					<input id="lastModifier" type="text" class="input-text" readonly="readonly"/>
				</td>
			</tr>
			<tr>
				<td>上一次修改时间</td>
				<td>
					<input id="lastModifyTime" type="text" class="input-text" readonly="readonly"/>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<button id="updateBtn" class="btn btn-primary radius">修改</button>
				</td>
			</tr>
		</table>
	</div>
	<!-- 查询所有物料Div -->
	<div class="queryTable">
		<table id="queryMaterialTable" class="table table-gb table-hover">
			<thead>
<!-- 				<th>物料代码</th> -->
				<th>物料名称</th>
				<th>物料类型</th>
				<th>状态</th>
				<th>编号</th>
				<th>描述</th>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<!-- 模态框 默认隐藏 -->
	<div id="addMaterialModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="materialModal" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content"><!-- 内容 -->
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h2 class="modal-title" id="addMaterialModalLabel" style="font-size:22px;">添加物料</h2>
				</div>
				<div class="modal-body">
					<table class="table table-bg table-hover table-border">
						<tr>
							<td>物料名称</td>
							<td>
								<input id="modalMaterialName" class="input-text" list="materialNameList"/>
								<datalist id="materialNameList"></datalist>
							</td>
						</tr>
						<tr>
							<td>规格型号</td>
							<td>
								<input id="modalModel" class="input-text" list="modelList"/>
								<datalist id="modelList"></datalist>
							</td>
						</tr>
						<tr>
							<td>单位</td>
							<td>
								<input id="modalUnit" class="input-text" list="unitList"/>
								<datalist id="unitList"></datalist>
							</td>
						</tr>
						<tr>
							<td>单价</td>
							<td>
								<input id="modalUnitPrice" class="input-text" type="text"/>
							</td>
						</tr>
						<tr>
							<td>状态</td>
							<td>
								<select id="modalStatus" class="input-text">
									<option>使用</option>
									<option>禁用</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>默认仓库</td>
							<td>
								<input id="modalDefaultWarehouse" class="input-text" list="defaultWarehouseList"/>
								<datalist id="defaultWarehouseList"></datalist>
							</td>
						</tr>
						<tr>
							<td>供应商名称</td>
							<td>
								<input id="modalProviderName" class="input-text" list="providerNameList"/>
								<datalist id="providerNameList"></datalist>
							</td>
						</tr>
						<tr>
							<td>物料类型</td>
							<td>
								<input id="modalMaterialType" class="input-text" list="materialTypeList"/>
								<datalist id="materialTypeList"></datalist>
							</td>
						</tr>
						<tr>
							<td>编号</td>
							<td>
								<input id="modalColor" class="input-text" list="colorList"/>
								<datalist id="colorList"></datalist>
							</td>
						</tr>
						<tr>
							<td>描述</td>
							<td>
								<input id="modalColorDescription" class="input-text" type="text"/>
							</td>
						</tr>
						<tr>
							<td>采购周期</td>
							<td>
								<input id="modalProcurementCycles" class="input-text" type="text"/>
							</td>
						</tr>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="add" type="button" class="btn btn-primary">添加</button>
				</div>
			</div>
		</div>
	</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="https://upload.shinehao.com.cn/20180810145355jquery.min1.9.1.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="https://upload.shinehao.com.cn/20180810150731H-ui.min3.0.2.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="https://upload.shinehao.com.cn/20180813175723jquery.dataTables1.10.0.js"></script> 
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="myJs/util.js"></script>
<!--/_footer 作为公共模版分离出去 -->

<!--请在下方写此页面业务相关的脚本 -->
<script type="text/javascript" src="myJs/materialTable.js"></script>
</body>
</html>